<template>
  <div class="activeBox">
    <div class="uoloadBox">
      <div class="description">
        <van-field
            v-model="value"
            rows="1"
            autosize
            type="textarea"
            placeholder="请输入留言"
            maxlength="20"
        />
      </div>
      <!--      样式oneUploader为一张大图  uploaderBox四张-->
      <div :class="maxCount==='1'?'oneUploader':fileList.length==0?'oneUploader':'uploaderBox'">
        <!--      <div class="uploaderBox">-->
        <div class="fieldItem" v-for="(item,index) in fileList" :key="index">
          <img :src="item.content" alt="">
          <!--          <van-icon name="close" @click="deleteImg(index)" />-->
          <img class="vanClose" src="../../assets/image/deleteImg.png" alt="" @click="deleteImg(index)">
        </div>
        <!--        <div class="fieldItem"></div>-->
        <!--        <div class="fieldItem"></div>-->
        <!--        <div class="fieldItem"></div>-->
        <van-uploader v-if="isuploader" :max-count="maxCount" :preview-image="false"
                      upload-icon="plus"
                      :after-read="afterRead"
                      v-model="fileList" multiple
                      accept="image/png, image/jpeg"
        />
      </div>
      <div class="selectbox" v-if="$route.query.type==3">
        <div class="selectbox-left" :style="classification===1?'background: #181818':''"
             @click="selectList(1,)">
          成人组 Adults
        </div>
        <div class="selectbox-right" :style="classification===2?'background: #181818':''"
             @click="selectList(2,)">
          儿童组 Kids
        </div>
      </div>
      <div class="submitbox"
           :style="$route.query.type==='1'? 'margin-top: 60px':$route.query.type==='3'?'margin-top: 10px':'margin-top: 65px'">
        <div class="submitbox-click" @click="submitUpload">
          上传 Upload
        </div>
      </div>
    </div>
    <van-dialog class="prizeResultModal" v-model="uploaSuccdShow" style="background-color: transparent">
      <img style="width: 100%" src="@/assets/image/drawBg.png">
      <div class="drawSub">
        <img @click="goDraw" src="../../assets/image/drawSub.png" alt="">
      </div>
      <div class="close_icon" style="margin-top: 10px;text-align: center" @click="dialogClos">
        <!--        <van-icon size="1rem" name="close" />-->
        <img src="../../assets/image/returnGo.png">
      </div>
    </van-dialog>
    <van-loading size="40px" vertical color="#1989fa" class="loading" type="spinner" text-size="20px"
                 v-show="uploading">上传中,请稍等...
    </van-loading>

  </div>
</template>

<script>
import {getUploadListUrl} from "@/api/list";
import {Notify} from "vant";
import {activitytime, myConstants} from "@/utils/activitytime";
import Compressor from 'compressorjs';
import ImageCompressor from "@/utils/methods";

export default {
  name: "index",
  data() {
    return {
      fileList: [],
      value: "",
      classification: "",
      file: [],
      uploaSuccdShow: false,
      uploadImg: "",
      maxCount: "",
      isuploader: true,
      uploading: false,
      compressFileList: []

    };
  },
  mounted() {
    if (this.$route.query.type == "1") {
      document.title = "新年许愿池 WishingFountain";
      this.maxCount = "1";

    } else if (this.$route.query.type == "2") {
      document.title = "晒晒我的宝藏工位 My office area";
      this.maxCount = "4";

    } else if (this.$route.query.type == "3") {
      this.maxCount = "1";
      let now = new Date().getTime();
      // 2023-01-09 23:59:59 以后,变为塔塔画展
      if (now > this.getRealTime(activitytime.xiaota)) {
        document.title = "塔塔画展 Exhibition";
      } else {
        document.title = "共绘小塔 Panting acitivty";
      }
    }
  },
  methods: {
    getRealTime(time) {
      let realTime = time.replace(/-/g, '/')
      return new Date(realTime).getTime();
    },
    goPage() {
      let type = this.$route.query.type;
      if (type == 1) {
        //新年祝福
        this.$router.replace({path: "/list", query: {type: "1"}});
      } else if (type == 2) {
        //活动二：新氛围
        this.$router.replace({path: "/listTwo", query: {type: "2"}});
      } else if (type == 3) {
        //活动三：共绘小塔-点赞有限制
        this.$router.replace({path: "/list", query: {type: "3"}});
      } else if (type == 4) {
        //活动四：观看宣传片
        this.$router.replace({path: "/videoList", query: {type: "4"}});
      } else if (type == 5) {
        this.$router.replace({path: "/luckyDrawSelect", query: {type: "5"}});
      }
    },
    dialogClos() {
      this.clickAudio();
      let _this = this;
      setTimeout(function () {
        _this.uploaSuccdShow = false;
        _this.goPage();
      }, myConstants.delay)

    },
    goList() {
      this.$router.push({path: "/list"});
    },
    deleteImg(index) {
      this.clickAudio();
      let _this = this;
      setTimeout(function () {
        _this.fileList.splice(index, 1);
        _this.compressFileList.splice(index, 1);
        if (_this.maxCount === "1") {
          _this.isuploader = true;
        }
      }, myConstants.delay)

    },
    async afterRead(file) {
      console.log(file);
      let isArray = Array.isArray(file);
      // console.log("afterRead file size=" + file.file.size)
      if (this.maxCount === "1") {
        if (this.fileList.length == 1) {
          this.isuploader = false;
        }
      }
      if (!isArray) {
        const files = file.file;
        let compressFile = await ImageCompressor(files, 'file', 0.6); //图片压缩
        console.log("afterRead compress file size=" + compressFile.size)
        this.file.push(compressFile);
        this.compressFileList.push(compressFile);
      } else {
        for (let i = 0; i < file.length; i++) {
          let compressFile = await ImageCompressor(file[i].file, 'file', 0.6); //图片压缩
          this.compressFileList.push(compressFile);
        }
      }
    },

    submitUpload() {
      if (this.uploading) {
        return;
      }
      this.clickAudio();
      let _this = this;
      //  setTimeout(function () {
      //新工位
      if (_this.$route.query.type == 3) {
        if (_this.classification && _this.value && _this.file) {
          var param = new FormData();
          // _this.file.forEach(item => {
          //   param.append("files", item, item.name);
          // });
          _this.compressFileList.forEach(file => {
            // let file = item.file;
            param.append("files", file, file.name);
          });
          param.append("content", _this.value);
          param.append("type", _this.$route.query.type);
          param.append("classification", _this.classification);
          _this.uploading = true;
          getUploadListUrl(param).then(res => {
            _this.uploading = false;
            if (res.code === 200) {
              Notify({type: "success", message: "发布成功"});
              //后台会根据是否重复上传来分配该值,如果重复则data=0,反之data=10
              if (res.data > 0) {
                _this.uploaSuccdShow = true;
              } else {
                _this.goPage();
              }
            }
          });
        } else {
          if (_this.classification == "" && _this.value == "" && _this.file == "") {
            Notify({type: "warning", message: "请全部填写"});
          } else if (_this.classification == "") {
            Notify({type: "warning", message: "请选择分组"});
          } else if (_this.value == "") {
            Notify({type: "warning", message: "请输入留言"});
          } else if (_this.file == "") {
            Notify({type: "warning", message: "请上传文件"});
          }
        }
      } else {
        if (_this.value && _this.fileList.length > 0) {
          var param = new FormData();
          _this.compressFileList.forEach(file => {
            // let file = item.file;
            param.append("files", file, file.name);
          });
          param.append("content", _this.value);
          param.append("type", _this.$route.query.type);
          _this.uploading = true;
          getUploadListUrl(param).then(res => {
            _this.uploading = false;
            if (res.code === 200) {
              Notify({type: "success", message: "发布成功"});
              if (res.data > 0) {
                _this.uploaSuccdShow = true;
              } else {
                _this.goPage();
              }
            }
          });
        } else {
          if (_this.value == "" && _this.file == "") {
            Notify({type: "warning", message: "请全部填写"});
          } else if (_this.value == "") {
            Notify({type: "warning", message: "请输入留言"});
          } else if (_this.file == "") {
            Notify({type: "warning", message: "请上传文件"});
          }
        }
      }
      // }, myConstants.delay)
    },
    selectList(type) {
      this.clickAudio();
      this.classification = type;
    },
    goDraw() {
      this.clickAudio();
      this.$router.replace({path: "/LuckyDraw", query: {type: 1}});
    }
  }
}
;
</script>

<style scoped lang="scss">

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  //display: flex;
  justify-content: center;
  width: 60vw;

}

.activeBox {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/image/start.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 24px;
  box-sizing: border-box;

  .uoloadBox {
    margin: auto;
    width: 80%;
    height: 85%;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBA9BC 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    padding: 10px;

    .description {
      width: 100%;
      height: 20%;

      padding: 20px;
      box-sizing: border-box;

      ::v-deep .van-cell {
        background: none !important;

      }

      ::v-deep .van-field__control {
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #989797 !important;
      }
    }

    .uploaderBox {
      width: 80%;
      height: 50%;
      margin: 60px auto 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      //align-items: flex-end;
      align-content: flex-start;

      .van-uploader {
        width: 120px;
        height: 120px;
        //margin-right: 15px;

        ::v-deep .van-uploader__wrapper {
          width: 100%;
          height: 100%;
          margin: 15px 0 0 0;

          .van-uploader__upload {
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            margin: 0;

            .van-icon {
              font-size: 64px;
            }

          }
        }

        ::v-deep .van-uploader__preview {
          width: 120px;
          height: 120px;

          .van-uploader__preview-image {
            width: 100%;
            height: 100%;

            img {
              width: 100%;
              height: 100%

            }
          }

        }
      }

      .fieldItem {
        width: 120px;
        height: 120px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        position: relative;
        margin-top: 15px;

        img {
          width: 100%;
          height: 100%;
        }


        .vanClose {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 999;
          font-size: 24px;
          color: #C6C6C6;
        }

        ::v-deep .van-uploader__upload-icon {
          font-size: 64px;
          font-weight: normal;
          color: #707070;
        }
      }


    }

    .isvan-uploader {
      .van-uploader {
        display: none !important;
      }
    }


    .oneUploader {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      flex-wrap: wrap;

      .van-uploader {
        width: 90%;
        height: 80%;

        //margin-right: 15px;

        ::v-deep .van-uploader__wrapper {
          width: 100%;
          height: 100%;
          margin: 15px 0 0 0;

          .van-uploader__upload {
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            margin: 0;

            .van-icon {
              font-size: 120px;
            }

          }
        }

        ::v-deep .van-uploader__preview {
          width: 120px;
          height: 120px;

          .van-uploader__preview-image {
            width: 100%;
            height: 100%;

            img {
              width: 100%;
              height: 100%

            }
          }

        }
      }

      .fieldItem {
        width: 90%;
        height: 90%;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        position: relative;
        margin-top: 15px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .vanClose {
          width: 25px;
          height: 25px;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 999;
          font-size: 24px;
          color: #C6C6C6;
        }

        ::v-deep .van-uploader__upload-icon {
          font-size: 64px;
          font-weight: normal;
          color: #707070;
        }
      }
    }

    .selectbox {
      width: 100%;
      height: 15%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 18px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      color: #7199FF;

      &-left {
        width: 40%;
        height: 40%;
        background: #FFFFFF;
        border-radius: 21px 21px 21px 21px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;

      }

      &-right {
        width: 40%;
        height: 40%;
        background: #FFFFFF;
        border-radius: 21px 21px 21px 21px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }


    .submitbox {
      width: 100%;
      height: 15%;


      &-click {
        margin: auto;
        width: 50%;
        height: 50%;
        background: linear-gradient(180deg, #FFFFFF 0%, #DEA2FC 100%);
        border-radius: 34px 34px 34px 34px;
        opacity: 1;
        font-size: 20px;
        font-family: DIN Pro-Regular, DIN Pro;
        font-weight: 400;
        color: #181818;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  //van-popup van-popup--round van-popup--center
  .prizeResultModal {
    //background: black !important;
    //width: 250px;
    //height: 250px;
    //padding: 10px;
    //background-image: url("@/assets/image/drawBg.png");
    //background-size: 100% 100%;
    //background-repeat: no-repeat;
    //border-radius: 21%;

    .drawSub {
      //position: absolute;
      //bottom: 10px;
      //left: 35%;
      //left: 50%;
      //margin-left: -50%;
      display: flex;
      justify-content: center;

      img {
        width: 50%;
        position: absolute;
        bottom: 25%;
        //top: 70%;
      }
    }
  }

  .close_icon {
    color: #f9f9f9;

    img {
      width: 56px;
      height: 56px;
    }
  }


}

@media (min-width: 1024px) {
  .fieldItem {
    width: 150px !important;
    height: 150px !important;
  }
}
</style>
